<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
			.tab{width: 300px;height: 300px;margin: 100px auto;border: 1px solid black;overflow: hidden;}
			input{width: 100px;height: 50px;line-height: 30px;text-align: center;float: left;}
			ul li{width: 300px;height: 250px;text-align:center;line-height:200px;display: none;}
			.active{background: yellow;}
			.show{display: block;}
	</style>
	</head>
	<body>
		<a href="xxk3.html">next</a>
		<div class="tab" id="tab">
			<section class="box">
				<input type="button" value="1"  class="active"/>
				<input type="button" value="2"/>
				<input type="button" value="3"/>
			</section>
				<ul>
					<li class="show">1</li>
					<li>2</li>
					<li>3</li>
				</ul>
		</div>
	<script>
		 class tap{
		  		constructor(){
		  			this.aBtn=document.querySelectorAll('input');
		  			this.aLi=document.querySelectorAll('ul li');
		  			this.show();
		  		}
		  		show(){
		  			var _this=this;
		  			for (let i=0;i<this.aBtn.length;i++) {
		  				this.aBtn[i].onclick=function(){
		  					_this.tab(i)
		  				}
		  			}
		  		}
		  		tab(i){
		  			for (var j =0;j<this.aLi.length;j++) {
						this.aLi[j].className='';
						this.aBtn[j].className='';
					}
					this.aLi[i].className='show';
					this.aBtn[i].className='active';
		  		}
		  }
		  class autoplay extends tap{
		  		constructor(obj){
		  			super(obj)
		  		this.index=0;
		  		}
		  		auto(){
		  			var _this=this;
		  			console.log(this)
		  			setInterval(function(){
		  				_this.index++;
		  				if(_this.index==_this.aBtn.length){	
						_this.index=0;								
					}
					_this.tab(_this.index);
		  			},2000)
		  		}
		  }
		  new autoplay('#tap').auto();
	</script>
	</body>
</html>
